<template id="grapefruit">
    <div>
        <div class="grapefruit_list">
            <div class="grapefruit_left">
                <img src="../image/xin.jpg" alt="">
            </div>
            <div class="grapefruit_right">
                <p>南非葡萄柚</p>
                <p>阳光充沛 酸甜可口</p>
                <p>3个 1.00kg</p>
                <p><time>¥</time>29.9<span>次日达</span><img src="../image/add_1.jpg" alt=""></p>
            </div>

        </div>
    </div>
</template>
<script>

    export default{
        name:'grapefruit',
        components:{

        }
    }

</script>
<style>
    .grapefruit_right p:nth-of-type(4) img{
        position:absolute;
        width:0.43rem;
        height:0.45rem;
        left:3.6rem;
        top:0.1rem;
        right:0.26rem;
    }
    .grapefruit_right p:nth-of-type(4) span{
        display:block;
        width:0.63rem;
        height:0.26rem;
        line-height:0.26rem;
        text-align:center;
        color:#82a64f;
        border:1px solid #82a64f;
        border-radius:0.1rem;
        left:1.3rem;
        top:0.2rem;
        position:absolute;
    }
    .grapefruit_right p:nth-of-type(4){
        width:1.8rem;
        height:0.68rem;
        line-height:0.68rem;
        text-align:center;
        color:#ed8100;
        font-size:0.2rem;
        position:relative;

    }
    .grapefruit_right p:nth-of-type(3){
        width:2.2rem;
        height:0.43rem;
        line-height:0.43rem;
        text-align:center;
        color:#bababa;
        font-size:0.18rem;

    }
    .grapefruit_right p:nth-of-type(2){
        width:3.13rem;
        height:0.35rem;
        line-height:0.35rem;
        text-align:center;
        color:#bababa;
        font-size:0.22rem;

    }
    .grapefruit_right p:nth-of-type(1){
        width:2.43rem;
        height:0.35rem;
        line-height:0.35rem;
        text-align:center;
        color:#353535;
        font-size:0.22rem;

    }
    .grapefruit_right{
        float:right;
        height:1.9rem;
        width:4.5rem;
        padding-top:0.2rem;
    }
    .grapefruit_left{
        width:1.7rem;
        height:2.1rem;
        position:relative;
        float:left;
    }
    .grapefruit_left img{
        display:block;
        position:absolute;
        width:1.55rem;
        height:1.56rem;
        left:0.25rem;
        top:0.27rem;
    }
    .grapefruit_list{
        width:100%;
        height:2.1rem;
        border-bottom:1px solid #d2d1cf;
    }
</style>